<template>
  <page>
    <template v-slot:header>
      <h2>
        <i class="el-icon-user-solid"></i>
        <span>{{ $t("user.user_manager") }}</span>
      </h2>
    </template>
    <template v-slot:content>
      <el-dialog
        :title="title"
        :visible.sync="display"
        :before-close="handleClose"
      >
        <add-form v-if="type === 'create'" @click="handleClose"></add-form>
        <update-form
          v-else-if="type === 'update'"
          @click="handleClose"
          :rowId="id"
        ></update-form>
      </el-dialog>
      <ky-table
        :search_data="search_data"
        :getData="getUsers"
        :showSelect="showSelect"
        :search_criteria="search_criteria"
        ref="table"
      >
        <template v-slot:table-action>
          <authorization-button class="kylin-item-button" @click="handleAdd" name="user:create"
            >{{ $t("configure.add") }}
          </authorization-button>
        </template>
        <template v-slot:table>
          <el-table-column prop="username" :label="$t('user.user_name')">
          </el-table-column>
          <el-table-column prop="typeName" :label="$t('user.user_type')">
          </el-table-column>
          <el-table-column :label="$t('user.enable_status')">
            <template slot-scope="scope">
              {{ String(scope.row.active) }}
            </template>
          </el-table-column>
          <el-table-column prop="department" :label="$t('user.department')">
          </el-table-column>
          <el-table-column prop="role" :label="$t('user.user_role')">
          </el-table-column>
          <el-table-column :label="$t('action')">
            <template slot-scope="scope">
              <authorization-button
                @click.native.prevent="handleEdit(scope.row)"
                type="text"
                size="medium"
                name="user:update"
              >
                {{ $t("edit") }}
              </authorization-button>
              <el-popconfirm
                :title="$t('user.user_password_reset_confirm')"
                @confirm="handleReset(scope.row)"
                icon-color="red"
                cancel-button-type="default"
                confirm-button-type="danger"
              >
                <authorization-button
                  type="text"
                  slot="reference"
                  size="medium"
                  class="kylin-delete"
                  name="user:reset"
                >
                  {{ $t("user.reset_password") }}
                </authorization-button>
              </el-popconfirm>
              <el-popconfirm
                :title="$t('user.user_delete_confirm')"
                @confirm="handleDelete(scope.row)"
                icon-color="red"
                cancel-button-type="default"
                confirm-button-type="danger"
              >
                <authorization-button
                  type="text"
                  slot="reference"
                  size="medium"
                  class="kylin-delete"
                  name="user:delete"
                >
                  {{ $t("delete") }}
                </authorization-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </template>
      </ky-table>
    </template>
  </page>
</template>

<script>
import Page from "@/components/Page";
import kyTable from "@/components/KyTable";
import AddForm from "./form/addForm.vue";
import UpdateForm from "./form/updateForm.vue";
import { getUsers, deleteUser, resetUserPassword, getDepartments } from "@/api/user";
import { getRoles } from "@/api/role";
import AuthorizationButton from "@/components/AuthorizationButton"
export default {
  name: "user",
  components: {
    Page,
    kyTable,
    AddForm,
    UpdateForm,
    AuthorizationButton
  },
  activated() {
      this.$refs.table.handleSearch();
  },
  data() {
    return {
      display: false,
      showSelect: false,
      search_criteria: {
        sortBy: "id",
        sortOrder: "desc",
        userId: this.$store.getters.getUserId,
      },
      id: "",
      title: "",
      type: "",
      delete_content: "",
      search_data: {
        name: {
          name: "user.user_name",
          type: "text",
        },
        type: {
          name: "user.user_type",
          type: "select",
          items: [
            {
              key: "0",
              name: "基地管理员",
            },
            {
              key: "1",
              name: "部门管理员",
            },
            {
              key: "2",
              name: "普通用户",
            },
          ],
        },
        departmentName: {
          name: "user.department",
          type: "select",
          items: [],
          func: this.getDepartment
        },
        active: {
          name: "user.enable_status",
          type: "select",
          items: [
            { key: true, name: this.$t("user.normal") },
            { key: false, name: this.$t("user.locking") },
          ],
        },
        roleName: {
          name: "user.user_role",
          type: "select",
          items: [],
          func: this.getRole,
        }
      },
    };
  },
  methods: {
    getUsers,
    handleClose(type) {
      this.display = false;
      this.title = "";
      this.type = "";
      if (type === "success") {
        this.$refs.table.handleSearch();
      }
    },
    getDepartment() {
        getDepartments().then(res => {
          if (res.data.code === "0") {
              let data = res.data.data;
              data.forEach(item => {
                  this.search_data.departmentName.items.push({
                      key: item.name,
                      name: item.name
                  })
              })

          } else {
              this.$message({
                  type: "error",
                  message: res.data.message
              })
          }
      })
    },
    getRole() {
      getRoles({ paged: false }).then((res) => {
        if (res.data.code === "0") {
          let roles = [];
          res.data.data.results.forEach((item) => {
            roles.push({
              key: item.name,
              name: item.name,
            });
          });
          this.search_data.roleName.items = roles;
        } else {
          this.$message({
            type: "error",
            message: res.data.message,
          });
        }
      });
    },
    handleAdd() {
      this.display = true;
      this.title = this.$t("configure.add");
      this.type = "create";
    },
    handleEdit(row) {
      this.id = row.id;
      this.display = true;
      this.title = this.$t("edit");
      this.type = "update";
    },
    handleReset(row) {
      resetUserPassword({ id: row.id }).then((res) => {
        if (res.data.code === "0") {
          this.$message({
            type: "success",
            message: res.data.message,
          });
          this.$refs.table.handleSearch();
        } else {
          this.$message({
            type: "error",
            message: res.data.message,
          });
        }
      });
    },
    handleDelete(row) {
      deleteUser({ id: row.id }).then((res) => {
        if (res.data.code === "0") {
          this.$message({
            type: "success",
            message: res.data.message,
          });
          this.$refs.table.handleSearch();
        } else {
          this.$message({
            type: "error",
            message: res.data.message,
          });
        }
      });
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.size {
  width: 134px;
}
.label {
  font-weight: 600;
  margin-right: 10px;
}
</style>